import React,{Component} from 'react';
import Slider from 'react-slick';
import {WeaTools} from 'ecCom';
import loadJs from 'loadjs'
import { isEqual, isEmpty } from 'lodash';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
// import '../css/Sliders.css';

export default class Sliders extends Component{
    constructor(){
        super();
        this.state={
            count:0,
            width: 0,
        }
        this.imageCarousel = this.imageCarousel.bind(this);
        const staticVersion = `?v${WeaTools && WeaTools.ls && WeaTools.ls.getStr("staticVersion") || 0}`;
        loadJs([`/social/js/drageasy/drageasy.js${staticVersion}`, `/social/js/bootstrap/js/bootstrap.js${staticVersion}`,`/social/im/js/IMUtil_wev8.js${staticVersion}`, `/social/js/imcarousel/imcarousel.js${staticVersion}`]);
    }

    //图片放大轮播
    imageCarousel(imgObj={},e){
        let imgPool = [];
        let indexNum = 0;
        jQuery(".portal-picture-img").each(function(){
            const imgsrc = !!jQuery(this).attr("data-imgsrc") ? jQuery(this).attr("data-imgsrc") : jQuery(this).attr("src");
            imgPool.push(imgsrc);
        });
        let imgsrc = jQuery(e.target).attr("src");
        const _imgPool = [];
        const data = imgObj.props.data;
        data.map(item => {
            _imgPool.push(item.url);
        })

        for(let i = 0; i < _imgPool.length ; i ++){
            if(imgsrc == _imgPool[i]){
                indexNum = i;
                break;
            }
        }
        window.IMCarousel.showImgScanner4Pool(true, _imgPool, indexNum, null, window.top);
    }
    componentDidMount(){
        const { esetting, height=$(this.refs.Slider).height() } = this.props;
        const {width: widthImg} = this.state;
        const { width: pictureWidth, imageWidthUnit='px', rollingDirection='1', height: pictureHeight, imageHeightUnit='px'} = esetting;
        let width = $(this.refs.Slider).width();
        let widthPicture = parseInt(pictureWidth);
        if(width != 0 && imageWidthUnit == '%') {
            widthPicture = parseInt(width * parseFloat(pictureWidth + ''))/100;
        }
        if(imageWidthUnit=='px' && pictureWidth > width) {
            widthPicture = width;
        }
        let count = parseInt(width / widthPicture);
        if(rollingDirection =='2' && height && pictureHeight && imageHeightUnit =='px'){
            count = parseInt(parseInt(height)/pictureHeight);
        }
        this.setState({
            count,
            width,
        });
    }
    componentDidUpdate(){
        const { esetting, height=200 } = this.props;
        const { count: counted, width: widthed} = this.state;
        const { width: pictureWidth, button, rollingDirection='1', imageWidthUnit='px', height: pictureHeight, imageHeightUnit} = esetting;
        let width = $(this.refs.Slider).width();
        if(pictureWidth == 0) return;
		let widthImg = parseInt(pictureWidth);
		if(width != 0 && imageWidthUnit == '%') {
            widthImg = parseInt(width * parseFloat(pictureWidth + ''))/100;
        }
        if(imageWidthUnit=='px' && pictureWidth > width) {
            widthImg = parseInt(width);
        }
        let count = parseInt(width / widthImg);
		if(rollingDirection =='2' && height && imageHeightUnit =='px'){
            count = parseInt(parseInt(height)/pictureHeight);
            if(pictureHeight > parseInt(height)){
                count = 1;
            }
        }
        if(!isNaN(count) && count !== counted) this.setState({count})
        // window.console.log("-------------------width :", width)
        if(!isNaN(width) && width !== widthed) this.setState({width})
    }
    render(){
        const { eid, data, esetting, isSetting } = this.props;
        let { height: elementHeight } = this.props;
        if(isEmpty(data)) return <div/>;
        let { count, width: widthImg } = this.state;
        const { showType, button, width, imageWidthUnit, height, imageHeightUnit, open, speed,rollingDirection='1', isAutoHiehgt= '0'} = esetting;
        let { autoShow = '1', showTitle='1',  fontSize= '16'} = esetting;
        if(count > data.length){
            autoShow = '0';
            count = data.length;
        }
        if(rollingDirection == '2' && !elementHeight){
            elementHeight = 200;
        }
        let style1  = {width: '100%', margin: '0 auto', height: elementHeight};
        // const style  = {width: showType == '1' ? '100%': divWidth2, margin: '0 auto', maxWidth: '92%'};
        let style  = {width: divWidth2, margin: '0 auto', maxWidth: '87%',height: elementHeight};
        if(button=='0'){
            style  = {width: divWidth2, margin: '0 auto', maxWidth: '100%',height: elementHeight};
        }
        if(imageHeightUnit =='%') {
            style.height = '100%';
        }

        if(imageHeightUnit == 'px') {
            style1.height = '100%';
        }

        let imgStyle = {
            width: width + imageWidthUnit,
            height: height + imageHeightUnit,
            margin: '0 auto',
            display: 'flex',
            alignItems: 'center'
        }
        if(rollingDirection =='2' && elementHeight  && imageHeightUnit =='px' && parseInt(elementHeight) < parseInt(height)){
            imgStyle.height = elementHeight;
        }

        if(rollingDirection =='2' && imageHeightUnit =='%'){
            const heigthPercent = parseFloat(height) / 100;
            imgStyle.height = heigthPercent * parseInt(elementHeight);
            count = parseInt( 1 / heigthPercent);
            style.height = parseInt(elementHeight);
        }

        if(width > widthImg && imageWidthUnit=='px'){
            imgStyle.width = widthImg + 'px';
        }
        if(widthImg != 0 && imageWidthUnit == '%') {
            if(width >= 100) {
                count = 1;
                imgStyle.width = '100%';
            }else {
                imgStyle.width = width * parseFloat(widthImg + '') / 100 + 'px';
            }
        }
        if(isAutoHiehgt == '1' && rollingDirection !='2') {
            imgStyle.height = 'auto';
        }
        let divStyle = {
            width: width + 4 +'px',
            height: height + 'px',
            display: 'flex',
            alignItems: 'center'
        }
        let divWidth2 = 0;
        let sliderComs = data.map(item => {
            divWidth2 += Number.parseFloat(width)+5;
            if(open == '1'){
                return <div title={item.name} style={divStyle}>
                    <div style={{position: 'relative', margin: '0 auto', height: imgStyle.height, width: '100%'}}>
                        <img className="portal-picture-img" src={item.url} alt="" style={{...imgStyle, height: '100%'}} onClick={(e) => this.imageCarousel(this,e)}/>
                        {
                            showTitle == '1' && <div style={{position: 'absolute', bottom: '0', backgroundColor: 'rgba(51, 51, 51, 0.6)', width: imgStyle.width, height: '15%',
                                fontSize: fontSize + 'px', color: 'white', textAlign: 'center', left: '0px'
                            }} ><span style={{margin: '0 auto', display: 'block'}}>{item.name}</span></div>
                        }
                    </div>
                </div>
            }else{
                return  <div title={item.name} style={{display: 'flex'}} onClick={ () => {
                    if(item.link == '') {
                        return;
                    }else window.open(item.link, "_blank");
                }}>
                    <div style={{position: 'relative', margin: '0 auto', height: imgStyle.height}}>
                        <img className="portal-picture-img" src={item.url} alt="" style={{...imgStyle, height: '100%'}}/>
                        {
                            showTitle == '1' && <div style={{position: 'absolute', bottom: '0', backgroundColor: 'rgba(51, 51, 51, 0.6)', width: imgStyle.width, height: '15%',
                                fontSize: fontSize + 'px', color: 'white', textAlign: 'center', left: '0px'
                            }} ><span style={{margin: '0 auto', display: 'block', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis'}}>{item.name}</span></div>
                        }
                    </div>
                </div>
            }
        })
        const settings = {
            infinite: true,
            autoplaySpeed: parseInt(speed),
            className: "center",
            dots: false,
            slidesToShow: count,
            slidesToScroll: 1,
            autoplay: autoShow == '1',
            vertical: rollingDirection == '2',
            pauseOnHover: true,
            draggable: false,
            nextArrow: <SampleNextArrow ecId={`${this && this.props && this.props.ecId || ''}_SampleNextArrow@ud54jo`} button={button} eid={eid}/>,
            prevArrow: <SamplePrevArrow ecId={`${this && this.props && this.props.ecId || ''}_SamplePrevArrow@fzzz6b`} button={button} eid={eid}/>,
        };

        let divWidth = "92%";
        if(button !== "1"){
            divWidth="100%";
        }else if(showType=="1"){
            divWidth="100%";
        }

        let carouselCom = (
            <Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@flz2ew`} {...settings}>
                {sliderComs}
            </Slider>
        );
        let className = "";
        if(rollingDirection == '1'){
            className = "portal-picture-slider-across"
        }
        return (
            <div ref={'Slider'} className={`portal-picture-slider ${className}`} id={`Slider-${eid}-${isSetting}`} style={showType == '1'?style1:style}>
                {
                    showType == '2' ? carouselCom
                        : <div style={{overflow: 'hidden', height: '100%'}}>
                            {
                                open == '1' ? <div title={data[0].name} style={{...imgStyle, margin: '0 auto', position: 'relative'}}>
                                        <img className="portal-picture-img" src={data[0].url} alt="" style={{width: '100%', height: '100%'}} onClick={(e) => this.imageCarousel(this,e)}/>
                                        {
                                            showTitle == '1' && <div style={{position: 'absolute', bottom: '0', backgroundColor: 'rgba(51, 51, 51, 0.6)', width: imgStyle.width, height: '15%',
                                                fontSize: fontSize + 'px', color: 'white', textAlign: 'center', left: '0px'
                                            }} ><span style={{margin: '0 auto', display: 'block'}}>{data[0].name}</span></div>
                                        }
                                    </div>
                                    : <div style={{...imgStyle, margin: '0 auto', position: 'relative'}}>
                                        {
                                            data[0].link != '' ?
                                            <a title={data[0].name} href={data[0].link} target='_blank' style={{width: '100%', height: '100%'}}>
                                                <img src={data[0].url} alt="" style={{width: '100%', height: '100%'}}/>
                                                {
                                                    showTitle == '1' && <div style={{position: 'absolute', bottom: '0', backgroundColor: 'rgba(51, 51, 51, 0.6)', width: imgStyle.width, height: '15%',
                                                        fontSize: fontSize + 'px', color: 'white', textAlign: 'center', left: '0px'
                                                    }} ><span style={{margin: '0 auto', display: 'block'}}>{data[0].name}</span></div>
                                                }
                                            </a>
                                            :
                                            <div title={data[0].name} style={{width: '100%', height: '100%'}}>
                                                <img src={data[0].url} alt="" style={{width: '100%', height: '100%'}}/>
                                                {
                                                    showTitle == '1' && <div style={{position: 'absolute', bottom: '0', backgroundColor: 'rgba(51, 51, 51, 0.6)', width: imgStyle.width, height: '15%',
                                                        fontSize: fontSize + 'px', color: 'white', textAlign: 'center', left: '0px'
                                                    }} ><span style={{margin: '0 auto', display: 'block'}}>{data[0].name}</span></div>
                                                }
                                            </div>
                                        }
                                    </div>
                            }
                        </div>
                }
            </div>
        )
    }
};

function SampleNextArrow(props) {
    const { className, style, onClick, button, eid } = props;
    if ('1' !== button) return <div/>;
    return (
        <div style={{verticalAlign: 'middle', width: '35px'}}>
            <div
                style={{ ...style, background: 'transparent url(/page/element/Picture/resource/image/next-horizontal_wev9.png) no-repeat 0 0', width: '32px',
                    height: '32px',"position": "absolute",
                    top: "50%",
                    "margin-top":"-16px",
                    right:"0px",
                    "margin-right": "-7%",cursor: "pointer",}}
                onClick={onClick}
            />
            {/*<div id={`picturenext_${eid}`} className="picturenext" style={{cursor:'hand'}} ></div>*/}
        </div>
    );
}


function SamplePrevArrow(props) {
    const { className, style, onClick, button, eid } = props;
    if ('1' !== button) return <div/>;
    return (
        <div
            style={{ ...style, background: 'transparent url(/page/element/Picture/resource/image/prev-horizontal_wev9.png) no-repeat 0 0', width: '32px',
                height: '32px',"position": "absolute",
                top: "50%",
                "margin-top":"-16px",
                "margin-left": "-7%",
                cursor: "pointer",
            }}
            onClick={onClick}
        />);
}
